<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>资源列表</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <style>
        .main-content {
            background-color: #ffffff;
        }

        tr td a {
            margin-right: 10px;
        }


        .container .table tbody tr td {
            line-height: 60px;
        }

        input {
            outline-style: none;
            background-color: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            border: solid 1px rgba(0, 0, 0, 0.2);
        }

        select {
            width: 173px;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }

        input:focus {
            border: 2px solid #467cf5;
        }

        .insert {
            top: 14px;
            position: absolute;
            right: 15px;
        }

        .resource {
            position: absolute;
            right: 75px;
        }

        .title-right {
            position: relative;
        }

        .title-left {
            background-color: white;
            padding: 0 20px;
        }

        .container-fluid {
            background-color: white;
        }

        .insertBox {
            text-align: center;
        }

        .layui-form-item {
            margin: 15px;
        }

        .insertBox-right {
            float: right;
        }

        button{
            outline: none !important;
        }
        .wrapper > table > thead > tr > th {
            height: 60px;
            text-align: center;
            vertical-align: middle;
        }
        .wrapper div {
            background-color: white;
        }

        .wrapper {
            background-color: #eee;
        }
    </style>
</head>

<body class="sticky-header">

<jsp:include page="../inc/left.jsp"/>
<div class="main-content" id="main-content">
    <jsp:include page="../inc/header.jsp"/>
    <!--body wrapper start-->
    <div class="wrapper">
        <!--Start Page Title-->
        <div class="page-title-box">
            <h4 class="page-title" style="text-indent: 1em">资源列表</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/admin">权限</a>
                </li>
                <li class="active">
                    资源列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>


        <div class="container-fluid title-right title-left"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding: 20px">
            <span style="color: #100E0EC8;font-size: 18px;"><i class="fa fa-file-text-o"></i> 数据列表</span>
            <button class="btn btn-info" style="float: right" id="insert-resource">添加</button>
        </div>


        <table class="table table-bordered container-fluid" style="font-size: 15px">
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>添加时间</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody style="text-align: center">
            <c:forEach items="${categoryList}" var="c">
                <tr>
                    <td>${c.id}</td>
                    <td>${c.name}</td>
                    <td><fmt:formatDate value="${c.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                    <td>${c.sort}</td>
                    <td>
                    <button class="btn btn-primary" onclick="editResourceCategory(${c.id})">编辑
                        </button>
                        <a class="btn btn-danger" onclick="deleteResourceCategory(${c.id})">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <div id="add-main-resource" style="display: none;">
            <div class="insertBox">
                <form class="layui-form" id="add-form" action="addResourcesCategory" method="post">
                    <div class="layui-form-item center">
                        <div class="layui-input-block">
                            <label class="layui-form-label" style="width: 100px">名称：</label>
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <label class="layui-form-label" style="width: 100px">排序：</label>
                            <input type="text" name="sort" required lay-verify="required" placeholder="请输入分类排序"
                                   class="layui-input" value="0">
                        </div>
                    </div>
                    <div class="layui-form-item insertBox-right">
                        <div class="layui-input-block">
                            <button class="btn btn-primary" type="submit">确定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <jsp:include page="../inc/footer.jsp"/>

        <div id="edit-resourceCategory" style="display: none;">
            <div class="insertBox">
                <form class="layui-form" action="editResourcesCategory" method="post">
                    <div class="layui-form-item center">
                        <input id="spanId" name="id" style="display: none"/>
                        <div class="layui-input-block">
                            <label class="layui-form-label" style="width: 100px">名称：</label>
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                                   class="layui-input" id="name1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <label class="layui-form-label" style="width: 100px">排序：</label>
                            <input type="text" name="sort" required lay-verify="required" placeholder="请输入分类排序"
                                   class="layui-input" value="0" id="sort1">
                        </div>
                    </div>
                    <div class="layui-form-item insertBox-right">
                        <div class="layui-input-block">
                            <button class="btn btn-primary" type="submit">确定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!--Begin core plugin -->
    <script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
    <script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
    <!-- End core plugin -->

    <!--Begin Page Level Plugin-->
    <script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
    <script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
    <script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
    <!--End Page Level Plugin-->
    <script>
        $("#insert-resource").click(function () {
            layer.open({
                type: 1,
                title: "添加资源分类",
                area: ['640px', '275px'],
                offset: ['200px', '550px'],
                content: $("#add-main-resource")
            });
        });

        function deleteResourceCategory(id) {
            layer.open({
                title: "删除提示！！！",
                content: "您确定要删除吗？",
                area: ['300px', '160px'],
                offset: ['240px', '680px'],
                yes: function (index, layero) {
                    location.href = "${pageContext.request.contextPath}/permissions/deleteResourceCategory/" + id;
                    layer.close(index);
                }
            })
        }

        function editResourceCategory(id) {
            $.post("${pageContext.request.contextPath}/permissions/findByIdCategory",{id},function (response) {
                $("#name1").val(response.name)
                $("#sort1").val(response.sort)
                $("#spanId").val(response.id)
                layer.open({
                    type: 1,
                    title: "修改资源分类",
                    area: ['640px', '275px'],
                    offset: ['200px', '550px'],
                    content: $("#edit-resourceCategory")
                });
            });

        }


    </script>
</body>
</html>
